<template>
	<view class="content">
		<!-- 搜索 -->
		<view class="search-cont">
			<view class="search">
				<view class="search-title" @click="showAdress(address)">
					<text>{{address}}</text>
					<image src="../../../static/coen/xiala.svg" mode="" class="search-img"></image>
				</view>
				<image src="../../../static/coen/shuxian.svg" mode="" class="search-xian"></image>
				
				<view>
					<input class="uni-input" placeholder="你想住哪里..." focus="true" @input="searchInput"/>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="prefer-title">
				<view class="prefer-view">
					<block v-for="(item,index) in titleArr" :key="index">
						<view class="prefer-con" @click="showScreen(item.type)">
							<image :src="item.img" class="prefer-img"></image>
							<text>{{item.title}}</text>
						</view>
					</block>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	var {log} = console;
export default {
	props: {
		address: ''
	},
	
	data() {
		return {
			// 轮播数组
			titleArr: [
					{
						img: require('../../../static/inster/ershoufang.png'),
						title: '二手房',
						type:'1'	// 二手房
					},
					{
						img: require('../../../static/inster/xiaoqu.png'),
						title: '小区',
						type:'3'	// 小区
					},
					{
						img: require('../../../static/inster/zhuFang.png'),
						title: '租房',
						type:'0'	// 租房
					},
					{
						img: require('../../../static/inster/chengJiao.png'),
						title: '查成交',
						type:'4'	// 查成交
					}
			],
			type:''
		};
	},
	methods: {
		
		// 重新定位城市
		showAdress(address){
			log("定位城市值:" + address)
			let obj = {
				address:address
			}
			let objStr = JSON.stringify(obj);
			log('跳转重新定位页面的值:' + objStr);
			wx.navigateTo({
				url: 'adress/adress?obj='+objStr
			});
		},
		
		// 刷选列表框
		showScreen(type){
			let obj ={type:type}
			// 路径带数据不能带对象,数组只能是字符串
			let objStr = JSON.stringify(obj);
			
			// 二手房
			if(type == 1){
				wx.navigateTo({
					url: 'screen/sechouceScreen?obj=' + objStr
				});
			}
			
			// 小区
			if(type == 3){
				wx.navigateTo({
					url: 'screen/houceScreen?obj=' + objStr
				});
			}
			
			// 租房
			if(type == 0){
				wx.navigateTo({
					url: 'screen/renthouceScreen?obj=' + objStr
				});
			}
			
			// 查成交
			if(type == 4){
				wx.navigateTo({
					url: 'screen/dealScreen?obj=' + objStr
				});
			}
			
		},
		searchInput(e){
			console.log(e.detail.value)
			this.$store.commit('seaRchmuta',e.detail.value)
		},
	}
};
</script>

<style scoped>
	.content{
		margin: 40upx 0;
	}
/* 搜索 */
.search {
	width: 100%;
	height: 100upx;
	line-height: 100upx;
	display: flex;
	align-items: center;
	border-radius: 20upx;
	background: #f9f9f9;
}
.search-title{
	padding: 0 30upx;
	display: flex;
	align-items: center;
}
.search-title text{
	height: 100upx;
	line-height: 100upx;
	font-size: 30upx;
	color: #666666;
}
.search input {
	height: 100upx;
	line-height: 100upx;
	width: 100%;
	font-size: 30upx;
	color: #666666;
}
.search-img {
	margin: auto 0 auto 10upx;
	width: 15upx;
	height: 15upx;
	padding-right: 30upx;
}
.search-xian {
	margin-left: -35upx;
	width: 30upx;
	height: 70upx;
}

/* 列表 */
.prefer-title {
	margin: 25upx 0;
	height: 220upx;
	width: 100%;
}
.prefer-view{
	height: 220upx;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.prefer-con{
	height: 160upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.prefer-con text{
	height: 65upx;
	line-height: 65upx;
	font-size: 25upx;
}
.prefer-img{
	height: 100upx;
	width: 100upx;
}















/* 指示点 */
.instruct-view {
	display: flex;
	justify-content: center;
	align-items: center;
}
.instruct {
	background: #e6e6e6;
	height: 4px;
	width: 15px;
	margin: 0 2px 10px 2px;
	border-radius: 10px;
}
.active {
	background: #fbae22 !important;
}
</style>
